@import '../../ui/base'

.root-team-memeber
  margin-top 30px

.sub-team-memeber
  padding-left 60px

.team-tree
  margin-top 0

.createTeamForm
  .team-tree
    margin-top 30px

.team-content
  @extends .h-center
  justify-content space-between
  cursor pointer
  height 46px
  margin 3px 0
  padding 0 20px
  user-select none
  &:hover
    background-color #f3f6f9
    > .team-actions
      opacity 1
  > span
    @extends .h-center

.edit-all
  .team-content
    &:hover
      > .team-actions
        opacity 0
  .user-content
    &:hover
      > .user-actions
        opacity 0
      > .user-profile
        > .user-profile-actions
          opacity 0

.arrow
  position absolute
  transform translateX(-20px) rotate(-90deg)
  transition transform .2s

.has-children
  > span
    > .arrow
      transform translateX(-15px) rotate(0deg)

.team-actions
  opacity 0
  transition opacity .2s
  > a
    user-select none
    margin 0 10px

.user-content
  @extends .h-center
  height 46px
  margin 3px 0
  padding 0 20px
  justify-content space-between
  &:hover
    background-color #f3f6f9
    > .user-actions
      opacity 1
    > .user-profile
      > .user-profile-actions
        opacity 1

.user-actions
  opacity 0
  transition opacity .2s
  @extends .h-center
  > a
    user-select none
    margin 0 10px

.user-profile
  @extends .h-center
  > span
    @extends .h-center

.user-avatar
  border-radius 50%
  overflow hidden
  display block
  margin-right 15px
  > i
    border-radius 50%
  > span
    @extends .h-center

.user-home
  font-size 12px
  i
    color #afc9e2

.user-profile-actions
  margin-left 15px
  opacity 0
  transition opacity .2s
  > a
    user-select none
    margin 0 10px

.user-team-admin
  background-color #f2f2f2
  color #999
  margin-left 15px
  font-size 12px
  padding 0 3px

.list
  [data-role="input"]
    width 240px

.team-create-dialog
  > div
    > div
      overflow visible

.check
  margin-right 10px
  display none

.edit-all
  .check
    display block

.job-title
  color #bbb
  margin-left 10px
  display inline-block
  vertical-align middle

.team-admin
  margin-left 10px
  background-color #e1e1e1
  color #777
  padding 2px 8px
  font-size 12px

.team-title-line
  display flex
  align-items flex-end
  line-height 1
  > span
    &:last-child
      font-size 12px
      background-color #f3f6f9
      color #999
      padding 0 10px
      margin-left 10px
      height 16px
      display flex
      align-items center

.team-icon
  color #b9cee6
  background-color #eaf2fb
  border-radius 50%
  overflow hidden
  width 26px
  height 26px
  font-size 20px
  margin 0 15px 0 0

.toolTip
  position relative
  color #000
  padding 4px 0
  &:hover
    cursor default
    .toolTip-content
      opacity 1
      z-index 999
      transform scale(1)
  .toolTip-content
    position absolute
    top -32px
    padding 2px 8px
    border-radius 8px
    background-color rgba(0, 0, 0, 0.65)
    color #fff
    opacity 0
    z-index 0
    transform scale(0)
    transition all .3s
    &::after
      content " "
      display block
      position absolute
      border 6px solid transparent
      border-top-color rgba(0, 0, 0, 0.65)
      top 26px